<template>
    <div class="form">
        <section class="body">
            <p class="hedd-text">患者基本信息</p>
            <van-field
                v-model="name"
                :disabled="disabled"
                required
                label="患者姓名"
                placeholder="请输入患者的真实姓名"
                maxlength="6"
            />
        </section>
        <section class="body">
            <p class="hedd-text">患者证件类型</p>
            <van-field
                v-model="id"
                :disabled="disabled"
                required
                label="身份证号"
                placeholder="请输入患者的身份证号"
                maxlength="18"
            />
            <!-- <van-tabs type="card" v-model="activeName">
                <van-tab title="身份证" name="id"></van-tab>
                <van-tab title="出生证明" name="prove">
                     <van-field v-model="id" required label="出生证编号" placeholder="请输入患者的出生证编号" maxlength="6" />
                </van-tab>
            </van-tabs>-->
        </section>
        <section class="body" v-if="disabled">
            <p class="hedd-text">患者身份材料</p>
            <div class="promise promiseDetail">
                <van-image
                    :src="'http://user-prepare.oss-cn-beijing.aliyuncs.com/' + card_front"
                    @click.native="imgshow('http://user-prepare.oss-cn-beijing.aliyuncs.com/' + card_front)"
                    :show-error="true"
                    :error-icon="require('@/assets/err.jpg')"
                    class="img"
                />
            </div>
        </section>
        <section class="body" v-else>
            <p class="hedd-text">患者身份材料</p>
            <div class="promise">
                <p>请上传身份证头像面照片，上传的身份证照片如有模糊、遮挡、边框缺失，审核将不予通过</p>
                <uploader type="patient" @setimg="setimg" :length="1" />
            </div>
        </section>
        <footer class="footer">
            <van-button
                type="primary"
                round
                color="linear-gradient(to right, #ff3c3c, #ff5e10)"
                size="large"
                @click="submit"
            >保存</van-button>
        </footer>
    </div>
</template>

<script>
import { Field, Button, Toast, Tab, Tabs, ImagePreview, Image } from "vant";
import { setInformHuanzhe, getInformHuanzhe } from "@/api/api";
import uploader from "@/components/uploader";
export default {
    name: "Basic",
    components: {
        [Field.name]: Field,
        [Button.name]: Button,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        [Image.name]: Image,
        uploader
    },
    created() {
        if (this.$route.path == "/DetailBasic") {
            this.again = true;
            getInformHuanzhe({ prepare_id: this.$route.query.id }).then(res => {
                if (res.code && res.results) {
                    this.disabled = true;
                    let data = res.results;
                    this.name = data.user_name;
                    this.id = data.user_number;
                    this.card_front = data.card_front;
                }
            });
        }
    },
    data() {
        return {
            name: "",
            id: "",
            prove: "",
            activeName: "id",
            fileList: [],
            card_front: "",
            again: false,
            disabled: false
        };
    },
    methods: {
        setimg(img) {
            this.fileList.push(img);
        },
        imgshow(img) {
            let arr = [];
            arr.push(img);
            ImagePreview({
                closeable: true,
                closeOnPopstate: true,
                images: arr
            });
        },
        submit() {
            if (this.disabled) {
                this.$router.push({
                    path: "/DetailInfo",
                    query: { id: this.$route.query.id }
                });
                return false;
            }
            let reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            if (this.name == "") {
                Toast("请输入患者的真实姓名");
                return false;
            }
            if (reg.test(this.id) === false) {
                Toast("请正确输入患者身份证号");
                return false;
            }
            if (this.fileList.length < 1) {
                Toast("请上传患者身份材料");
                return false;
            }
            setInformHuanzhe({
                prepare_id: this.$route.query.id,
                user_name: this.name,
                user_number: this.id,
                images: this.fileList.join(",")
            }).then(res => {
                if (res.code) {
                    Toast("成功");
                    if (this.again) {
                        this.$router.push({
                            path: "/DetailInfo",
                            query: { id: this.$route.query.id }
                        });
                    } else {
                        this.$router.push({
                            path: "/PpayeeInfo",
                            query: { id: this.$route.query.id }
                        });
                    }
                }
            });
        }
    }
};
</script>

<style scoped>
.promise p {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.32);
    line-height: 20px;
    margin-bottom: 20px;
}
</style>